<template>
    <div style="width: 100%; height: 100%; border: 2px solid #ccc; margin-top: 20px;">
    <el-form>
        <el-row></el-row>
        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple t1">系统信息</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">系统名称
                <span class="clight">卷宗管理系统</span>
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">版本号
                <span class="clight">XXXXXXXXX</span>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">编译时间
                <span class="clight">XXXXXXXXX</span>
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">启动时间
                <span class="clight">XXXXXXXXX</span>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row >
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="20"><div class="light"></div></el-col>
        </el-row>
        <!--<hr/>-->


        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple t1">许可证信息</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">机器码
                <span class="clight">XXXXXXXXX</span>
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">剩余天数
                <span class="clight">XXXXXXXXX</span>
            </div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light"><el-button class="clight">更新许可证</el-button></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">软件名称
                <span class="clight">卷宗管理系统</span>
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>

        <el-row></el-row>
        <el-row >
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="20"><div class="light"></div></el-col>
        </el-row>
        <!--<hr/>-->

        <!--<el-row></el-row>-->
        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple t1">运维操作</div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple-light"><el-button class="clight">数据备份</el-button></div></el-col>
            <el-col :span="17"><div class="grid-content bg-purple-light clight">使用此操作，数据将会备份。</div></el-col>
        </el-row>
        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple-light"><el-button class="clight">重启服务</el-button></div></el-col>
            <el-col :span="17"><div class="grid-content bg-purple-light clight">重启当前正在运行的服务器。</div></el-col>
        </el-row>
        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple-light"><el-button class="clight">恢复出厂</el-button></div></el-col>
            <el-col :span="17">
                <div class="grid-content bg-purple-light clight">
                    使用此操作，系统所有数据将恢复出厂配置，之前系统所有数据将无法恢复。
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple-light"><el-button
            class="clight">版本升级</el-button></div></el-col>
            <el-col :span="17"><div class="grid-content bg-purple-light clight">升级系统版本。</div></el-col>
        </el-row>
        <el-row></el-row>
    </el-form>
    </div>
</template>

<script>
    import { isEmpty, formatDate, stringFormat,getStartTimeOfDate, getEndTimeOfDate, getStartTimeOfWeek, getEndTimeOfWeek, getStartTimeOfMonth, getEndTimeOfMonth } from '../../utils/util'
    import { getAction } from '@/utils/manage'
    import ElForm from "element-ui/packages/form/src/form";

    export default {
        components: {ElForm},
        name: 'guard',
        data() {
            return{}
        },
        computed: {},
        created() {},
        methods:{}
    }
</script>

<style lang="less" scoped>
    .clight {
        color: #C1C3CA;
    }
    .t1 {
        font-size: 20px;
        text-align:center;
        margin-top: 10px;
    }
    .light {
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
    }
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    /*.bg-purple-dark {*/
        /*background: #99a9bf;*/
    /*}*/
    /*.bg-purple {*/
        /*background: #d3dce6;*/
    /*}*/
    /*.bg-purple-light {*/
        /*background: #e5e9f2;*/
    /*}*/
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
